<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../css/sticky-footer.css"/>
<link rel="stylesheet" type="text/css" href="../css/navbar.css"/>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<title>bootstrap test</title>
<script type='text/javascript'>
	function init(){
		var element = $('#example');
		var options = {
			bootstrapMajorVersion:3,
			currentPage: 1,
			numberOfPages: 5,
			totalPages:11
		}
		element.bootstrapPaginator(options);
	}
</script>
</head>
<body onload="init()">
<div id="wrap">
	<nav class="navbar navbar-default" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Home</a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Product<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Product List</a></li>
							<li><a href="#">new Product</a></li>
							<li><a href="#">Product Group</a></li>
							<li><a href="#">Category</a></li>
							<li class="divider">Comments</li>
							<li><a href="#">Attribute</a></li>
							<li class="divider">Option</li>
							<li><a href="#">Summary</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">sale<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Ordes</a></li>
							<li><a href="#">Paid Log</a></li>
							<li><a href="#">Ship Log</a></li>
							<li><a href="#">Tax</a></li>
							<li class="divider">Shipment</li>
							<li><a href="#">Payment</a></li>
							<li class="divider">Discount</li>
							<li><a href="#">Coupon</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Customer<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Customer List</a></li>
							<li><a href="#">Customer Group</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container">
		<table class="table table-hover">
		<thead>
			<tr>
				<th>Student-ID</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Grade</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>001</td>
				<td>Rammohan </td>
				<td>Reddy</td>
				<td>A+</td>
			</tr>
			<tr>
				<td>002</td>
				<td>Smita</td>
				<td>Pallod</td>
				<td>A</td>
			</tr>
			<tr>
				<td>003</td>
				<td>Rabindranath</td>
				<td>Sen</td>
				<td>A+</td>
			</tr>
		</tbody>
	</table>
	<div>
		<ul id='example'></ul>
	</div>
	</div>
</div>

<div id="footer">
	<div class="container">
		<p class="text-muted credit" align="center">©Copyright 2013 Bootply | All rights reserved. </p>
	</div>
</div>
</body>
</html>
